<template>
	<view class="main">
		<view class="content">
			<scroll-view scroll-y style="height: 100%;width: 100%;">
				<view class="card" v-for="(item,index) in list" :key="index" @click="showPopup(item)">
					<view class="name">
						{{item.title}}
					</view>
					<view class="business">
						<text>{{item.question}}</text>
					</view>
					<view class="dibu">
						<view class="date">
							<text>{{item.updateTime}}</text>
						</view>
						<view class="details">
							<text :class="[ item.status== 1 ?'green':'red' ]">{{ item.status== 1?'已回复':'未回复'}}</text>
						</view>
					</view>
				</view>
				<uni-load-more :status="status" v-if="list.length != 0"></uni-load-more>

				<view class="noData" v-if="list.length == 0 && status == 'nomore'">
					<image src="../../static/img_nodata.png"></image>
				</view>
			</scroll-view>
		</view>

		<u-popup v-model="show" mode="center" border-radius="12" width="600" height="700">
			<view class="lineBox">
				<u-time-line>
					<u-time-line-item>
						<template v-slot:node>
							<view class="u-node" style="background: #5b96ff;">
							</view>
						</template>
						<template v-slot:content>
							<view class="line" style="margin-bottom: 40rpx;">
								<view style="font-size: 32rpx;margin-bottom: 20rpx;">提交时间</view>
								<view style="font-size: 28rpx;color: #999;">{{ item.insertTime }}</view>
							</view>
						</template>
					</u-time-line-item>
					<u-time-line-item>
						<template v-slot:node>
							<view class="u-node" style="background: #5b96ff;">
							</view>
						</template>
						<template v-slot:content>
							<view class="line">
								<view style="font-size: 32rpx;margin-bottom: 20rpx;">
									{{ item.status == 1?'回复时间' :'暂未回复' }}</view>
								<view style="font-size: 28rpx;color: #999;">{{ item.updateTime }}</view>
							</view>
							<view class="line" v-if="item.status == 1">
								<view style="font-size: 32rpx;margin-bottom: 20rpx;margin-top: 20rpx;word-break: break-all;">
								{{ item.reply }}</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import uniLoadMore from '@/uni-ui/libs/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				status: 'more',
				list: [],
				show: false,
				item: {}
			}
		},
		created() {
			this.getItemResult()
		},
		methods: {
			// 获取列表信息
			getItemResult() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.status = 'loading';
				this.$ajax({
					url: '/api/news/zwCollection/myPolicyAskProblem',
					needAuth: true,
					data: {
						qyUuid: 12312321321
					}
				}).then(res => {
					if (res.code == 200) {
						this.status = 'nomore';
						this.list = res.data;
					}
				}).finally(() => {
					uni.hideLoading();
				});
			},
			showPopup(item) {
				this.item = item;
				this.show = true;
			}
		}
	}
</script>

<style scoped lang="scss">
	.noData {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 30rpx;

		image {
			width: 408rpx;
			height: 319rpx;
		}
	}

	.lineBox {
		padding: 40rpx 30rpx;
	}

	.tanchu {
		width: 600rpx;
		height: 746rpx;
		position: fixed;
		margin-top: 280rpx;
		margin-left: 75rpx;
		background-color: #ffffff;
		display: flex;
		border-radius: 12rpx;
	}

	.tancont {
		width: 348rpx;
		height: 627rpx;
		margin-top: 60rpx;
		margin-left: 90rpx;
	}

	.li-item {
		margin-top: 60rpx;
	}

	.u-node {
		width: 24rpx;
		height: 24rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-desc {
		color: #333333;
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: #999999;
		font-size: 26rpx;
	}

	.main {
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		height: 100%;
		overflow: hidden;

		.content {
			height: 100%;

			.card {
				width: 690rpx;
				position: relative;
				display: flex;
				flex-direction: column;
				background-color: #ffffff;
				box-shadow: 2rpx 12rpx 27rpx 0rpx rgba(135, 136, 141, 0.15);
				border-radius: 12rpx;
				padding: 30rpx;
				box-sizing: border-box;
				margin: 0 auto;
				margin-bottom: 30rpx;

				.name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}

				.business {
					margin-top: 20rpx;

					text {
						font-size: 28rpx;
						color: #999;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}

				.dibu {
					display: flex;
					width: 100%;
					align-items: center;
					margin-top: 20rpx;

					.date {
						font-size: 24rpx;
						letter-spacing: 0rpx;
						color: #999999;
					}

					.details {
						margin-left: 240rpx;
						font-size: 28rpx;
						letter-spacing: 0rpx;

						.green {
							color: #0cc63c;
						}

						.red {
							color: #f23434;
						}
					}
				}

			}
		}
	}
</style>
